<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="260px">
        <el-carousel-item v-for="item in carousel" :key="item.sId">
          <img :src="item.spic" :alt="'aa'" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 
        <div class="phone">
          <div class="box-hd">
            <div class="title">精品推荐</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target +'public/imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <MyList :list="phoneList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
         手机商品展示区域END -->

        <!-- 家电商品展示区域 -->
        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">精品推荐</div>
            <div class="more" id="more">
              <MyMenu :val="2" >
                <span slot="1">热门</span>
                <span slot="2">推荐</span>
              </MyMenu>
            </div>
          </div>
          <!-- <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="applianceList" :isMore="true"></MyList>
            </div>
          </div>-->
        </div>


        <el-row>
          <el-col
            style="width: 150px; margin-left: 20px"
            :span="8"
            v-for="(value, key, index) in courseList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
            <router-link :to ="'/goods/homrtodetails/' + value.id">
              <img :src=value.pic class="image">
            </router-link>
              <div style="padding: 14px;">
                <span>{{value.name}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ value.createTime }}</time>
                  <router-link :to="{ path: '/order',query:{id:value.id,status:1}}">
                  <el-button type="text" class="button">立即购买</el-button>
                  </router-link>
                  <el-button type="text" class="button"  @click="addShoppingCart(value.id)">加入购物车</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">相关活动</div>
            <div class="more" id="more">
              <MyMenu :val="3" >
                <span slot="1">热门</span>
                <span slot="2">推荐</span>
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <!--<div class="promo-list">
              <ul>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/accessory/accessory-promo1.png'
                    "
                    alt
                  />
                </li>
                <li>
                  <img
                    :src="
                      $target + 'public/imgs/accessory/accessory-promo2.png'
                    "
                    alt
                  />
                </li>
              </ul>
            </div>-->
            <el-row >
                <el-col style="width:150px;margin-left:20px" :span="8" v-for="(value,key,index) in activityList"  :key="key" :offset="index > 0 ? 4 : 0">
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src=value.pic class="image">
                    <div style="padding: 14px;">
                      <span>{{value.name}}</span>
                      <div class="bottom clearfix">
                        <time class="time">{{ value.createTime}}</time>
                         <router-link :to="{ path: '/order',query:{id:value.id,status:2}}">
                            <el-button type="text" class="button">立即购买</el-button>
                            <el-button type="text" class="button">加入购物车</el-button>
                        </router-link>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

          </div>
        </div>
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    
  },
  data() {
    return {
      courseList: {},
      activityList: {},
      currentDate: new Date(),
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1, // 配件当前选中的商品分类
    };
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    },
  },
  created() {
    // 获取轮播图数据
    this.$axios
      .post("http://localhost:8090/slideShow/userFont/selectAll/1/5", {})
      .then((res) => {
        this.carousel = res.data.data.slideShowList;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
    //获取活动列表
    this.$axios
      .post("http://localhost:8090/activity/userFont/selectAll/1/4", {})
      .then((res) => {
        console.log(res);
        this.activityList = res.data.object.list;
      })
      .catch((err) => {
        return Promise.reject(err);
      });
    //获取课程列表
    this.$axios
      .post("http://localhost:8090/courseManagment/userFont/selectAll", {
        page: 1,
        limit: 4,
      })
      .then((res) => {
        console.log(res);
        this.courseList = res.data.object.list;
        console.log(this.courseList);
      })
      .catch((err) => {
        return Promise.reject(err);
      });
      
    },
    //   // 获取各类商品数据
    //   this.getPromo("手机", "phoneList");
    //   this.getPromo("电视机", "miTvList");
    //   this.getPromo("保护套", "protectingShellList");
    //   this.getPromo("充电器", "chargerList");
    //   this.getPromo(
    //     ["电视机", "空调", "洗衣机"],
    //     "applianceList",
    //     "/api/product/getHotProduct"
    //   );
    //   this.getPromo(
    //     ["保护套", "保护膜", "充电器", "充电宝"],
    //     "accessoryList",
    //     "/api/product/getHotProduct"
    //   );
    // },
    methods: {
      addShoppingCart(id) {
      // var userAccount = JSON.parse(localStorage.getItem("user")).userName;
      // 判断是否登录,没有登录则显示登录组件
      if (!this.$store.getters.getUser) {
        alert("您还没有登录");
        this.$store.dispatch("setShowLogin", true);
        return;
      }
      alert("登录成功,开始发送请求");
      this.$axios
        .get(
          "/ShoppingCart/userFont/addCourseToCart/"+ id
        )
        .then((res) => {
          switch (res.data.code) {
            case "001":
              // 新加入购物车成功
              this.unshiftShoppingCart(res.data.shoppingCartData[0]);
              this.notifySucceed(res.data.msg);
              break;
            case "002":
              // 该商品已经在购物车，数量+1
              this.addShoppingCartNum(this.productID);
              this.notifySucceed(res.data.msg);
              break;
            case "003":
              // 商品数量达到限购数量
              this.dis = true;
              this.notifyError(res.data.msg);
              break;
            default:
              this.notifyError(res.data.msg);
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    //   // 获取家电模块子组件传过来的数据
    //   getChildMsg(val) {
    //     this.applianceActive = val;
    //   },
    //   // 获取配件模块子组件传过来的数据
    //   getChildMsg2(val) {
    //     this.accessoryActive = val;
    //   },
    //   // 获取各类商品数据方法封装
    //   getPromo(categoryName, val, api) {
    //     api = api != undefined ? api : "/api/product/getPromoProduct";
    //     this.$axios
    //       .post(api, {
    //         categoryName
    //       })
    //       .then(res => {
    //         this[val] = res.data.Product;
    //       })
    //       .catch(err => {
    //         return Promise.reject(err);
    //       });
    // }

    //   if (this.categoryID.length == 0 || this.categoryID == 1) {
    //     this.$axios
    //       .post("http://localhost:8081/courseManagment/userFont/selectAll", {
    //         name: this.name,
    //       })
    //       .then((res) => {
    //         this.product = res.data.object.list;
    //         console.log("product:", this.product);
    //         this.total = res.data.object.total;
    //       })
    //       .catch((err) => {
    //         return Promise.reject(err);
    //       });
    //   } else {
    //     this.$axios
    //       .post(
    //         `http://localhost:8081/activity/userFont/selectByAny/${this.page}/${this.limit}`,
    //         {}
    //       )
    //       .then((res) => {
    //         this.product = res.data.object.list;
    //         console.log("product:", this.product);
    //         this.total = res.data.object.total;
    //         console.log("resp:", this.product);
    //       })
    //       .catch((err) => {
    //         return Promise.reject(err);
    //       });
    //   }
    },
  },
};
</script>
<style scoped>
@import "../assets/css/index.css";
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>